<template>
  <div class="user-profile">
    <div class="user-info">
      <van-cell-group>
        <van-cell
            title="吴彦祖"
            label="美国电影明星，建筑学家"
            v-if="userProfile"
            :title="userProfile.username"
            :label="userProfile.description || '暂无个人描述'"
            icon="user-circle-o"
            is-link
            @click="goToPersonalHomePage"
        >
          <template #right-icon v-if="userProfile.vipStatus">
            <van-tag type="primary">VIP</van-tag>
          </template>
          <!--          <template #icon> <img src="https://zpa-picgo.oss-cn-hangzhou.aliyuncs.com/img/20240615173401.png"  style="width: 60px; height: 60px;">-->
          <template #icon>
            <img v-if="userProfile.imageUrl" :src="userProfile.imageUrl" alt="User Avatar" class="user-avatar"/>
          </template>
          <!--          </template>-->
        </van-cell>
      </van-cell-group>
    </div>
    <div class="user-stats">
      <van-grid :column-num="4" border="false">
        <van-grid-item @click="goToFollowPage">
          <div class="stat-value">{{followingCount}}</div>
          <div class="stat-label">关注</div>
        </van-grid-item>
        <van-grid-item @click="goToFollowPage">
          <div class="stat-value">{{followersCount }}</div>
          <div class="stat-label">粉丝</div>
        </van-grid-item>
        <van-grid-item @click="goToDynanicPage">
          <div class="stat-value">245</div>
          <div class="stat-label">动态</div>
        </van-grid-item>
        <van-grid-item>
          <div class="stat-value">249</div>
          <div class="stat-label">获赞</div>
        </van-grid-item>
      </van-grid>
    </div>
    <van-grid :column-num="4">
      <van-grid-item icon="edit" text="我的创作" @click="goToMyCreatePage"/>
      <van-grid-item icon="orders-o" text="我的课程" @click="goToMyCoursePage"/>
      <van-grid-item icon="star-o" text="我的收藏" @click="goToMyCollectPage"/>
      <van-grid-item icon="clock-o" text="浏览记录" @click="goToBrowsingHistory"/>
    </van-grid>
    <van-cell-group>
      <van-cell title="常用工具"/>
      <van-grid :column-num="4">
        <van-grid-item icon="chat-o" @click="onClickMessage" text="消息"/>
        <van-grid-item icon="friends-o" @click="onClickMessage1" text="我的订单"/>
        <van-grid-item icon="setting-o" @click="onClickMessage2" text="我的缓存"/>
        <van-grid-item icon="question-o" @click="onClickMessage3" text="错题集"/>
        <van-grid-item icon="question-o" @click="onClickMessage4" text="我的求助"/>
        <van-grid-item icon="question-o" @click="onClickMessage5" text="我的学币"/>
        <van-grid-item icon="question-o" @click="onClickMessage6" text="帮助与反馈"/>
        <van-grid-item icon="question-o" @click="onClickMessage7" text="系统设置"/>
      </van-grid>
    </van-cell-group>
  </div>
</template>

<script setup>
import {showToast} from 'vant';
import {useStore} from '../../pinia';
import {onMounted, ref} from 'vue';
import axios from 'axios';

const store = useStore();
const userProfile = ref({});
const userId = ref(null); // 新增：用于存储用户ID
const followingCount = ref(0);
const followersCount =ref(0)
onMounted(async () => {
  try {
    const response = await axios.get('http://localhost:9090/user/user/getUser');
    if (response.status === 200 && response.data.code === 0) {
      userProfile.value = response.data.data;
      console.log(userProfile)
      followingCount.value = userProfile.value.followingCount;
      followersCount.value = userProfile.value.followersCount;
      userId.value = response.data.data.id;
    } else {
      showToast('获取用户信息失败，请稍后重试');
    }
  } catch (error) {
    console.error('获取用户信息时发生错误:', error);
    showToast('网络错误，请检查您的网络连接');
  }
});
    onMounted(async () => {
      try {
        const response = await axios.get('http://localhost:9090/user/user/getUser');
        if (response.status === 200 && response.data.code === 0) {
          userProfile.value = response.data.data;
          console.log(userProfile)
          followingCount.value = userProfile.value.followingCount;
          followersCount.value = userProfile.value.followersCount;
          userId.value = response.data.data.id;
        } else {
          showToast('获取用户信息失败，请稍后重试');
        }
      } catch (error) {
        console.error('获取用户信息时发生错误:', error);
        showToast('网络错误，请检查您的网络连接');
      }
    });

const onClickMessage7 = () => {
  router.push("/systemSettings");
}
const onClickMessage6 = () => {
  router.push("/helpAndFeedback");
}
const onClickMessage5 = () => {
  router.push("/myLearnMoney");
}
const onClickMessage4 = () => {
  router.push("/myHelp");
}
const onClickMessage3 = () => {
  router.push("/questionList");
}
const onClickMessage2 = () => {
  router.push("/myCache");
}
const onClickMessage1 = () => {
  router.push("/orderList");
}
const onClickMessage = () => {
  router.push("/messageList");

}


import {useRouter} from "vue-router";

const router = useRouter();
const goToFollowPage = () => {
  router.push({name: 'Follow'});
}
const goToBrowsingHistory = () => {
  router.push({name: 'BrowsingHistory'});
}
const goToPersonalHomePage = () => {
  if (userId.value) {
    router.push({
      name: 'PersonalHomeCopy',
      params: {
        userId: userId.value,
      }
    });
  } else {
    showToast('用户ID未找到，无法跳转');
  }
};
const goToMyCreatePage = () => {
  router.push({name: 'MyCreate'});
}
const goToMyCoursePage = () => {
  router.push({name: 'MyCourse'});
}
const goToMyCollectPage = () => {
  router.push({name: 'MyCollect'});
}
const goToDynanicPage = () => {
  router.push({name: 'Dynanic'});
}

</script>

<style scoped>
.user-stats {
  background-color: #fff;
  padding: 16px 0;
}

.stat-value {
  font-size: 18px;
  font-weight: bold;
  text-align: center;
}

.stat-label {
  font-size: 14px;
  color: #888;
  text-align: center;
}

.user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
</style>